<template>
    <div class="ls-goods">
        <div class="ls-goods__top ls-card">
            <el-alert :title="$t('温馨提示：1.设置分销商品的佣金比例。')" type="info" show-icon :closable="false">
            </el-alert>

            <div class="coupon-search m-t-16">
                <el-form ref="form" inline :model="goodsSearchData" label-width="100px" size="small">
                    <el-form-item :label="$t('商品信息')">
                        <el-input style="width: 280px" v-model="goodsSearchData.name" :placeholder="$t('商品名称/ID/编码')">
                        </el-input>
                    </el-form-item>

                    <el-form-item :label="$t('商品分类')">
                        <el-cascader class="header-input" v-model="goodsSearchData.category_id" :options="categoryList"
                            :props="{
                                multiple: false,
                                checkStrictly: true,
                                label: 'name',
                                value: 'id',
                                children: 'sons',
                                emitPath: false
                            }" clearable filterable></el-cascader>
                    </el-form-item>

                    <el-form-item :label="$t('分销状态')">
                        <el-select v-model="goodsSearchData.is_distribution" :placeholder="$t('全部')">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                  <el-form-item :label="$t('商品状态')">
                    <el-select v-model="goodsSearchData.status" :placeholder="$t('全部')">
                      <el-option v-for="item in goodsStatus" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>

                    <el-form-item label="" class="m-l-6">
                        <el-button size="small" type="primary" @click="getDistributionData(1)">{{$t('查询')}}</el-button>
                        <el-button size="small" @click="resetgoodsSearchData">{{$t('重置')}}</el-button>

                        <export-data class="m-l-10" :pageSize="pager.size" :method="apiDistributionGoodsLists" :param="goodsSearchData"></export-data>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="m-t-24 ls-card">
            <div class="m-b-24">
                <el-button type="primary" size="mini" @click="selectAll">{{$t('全选当前页')}}</el-button>

                <ls-dialog class="inline m-l-24 " :title="$t('取消分销')" :content="`确定批量不参与吗?请谨慎操作`" @confirm="couponDel('',0)">
                    <el-button slot="trigger" size="mini" type="primary">{{$t('取消分销')}}</el-button>
                </ls-dialog>

                <ls-dialog class="inline m-l-24 " :title="$t('参与分销')" :content="`确定批量参与吗?请谨慎操作`" @confirm="couponDel('',1)">
                    <el-button slot="trigger" size="mini" type="primary">{{$t('参与分销')}}</el-button>
                </ls-dialog>
            </div>

            <el-table ref="paneTable" :data="pager.lists" @selection-change="selectionChange" v-loading="pager.loading"
                style="width: 100%" size="mini">
                <el-table-column fixed="left" type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" :label="$t('商品名称')" min-width="180">
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-image class="flex-none" style="width: 58px; height: 58px" :src="scope.row.image" />
                            <div class="goods-info m-l-8">
                                <div class="line-2">{{ scope.row.name }}</div>
                                <div>
                                  <el-tag v-if="scope.row.spec_type == 2" size="mini">{{$t('多规格')}}</el-tag>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="coupon_code" :label="$t('价格')" min-width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.price}}</span>
                    </template>
                </el-table-column>
              <el-table-column prop="status_desc" :label="$t('商品状态')" min-width="180">
                <template slot-scope="scope">
                  <span>{{scope.row.status_desc}}</span>
                </template>
              </el-table-column>
                <el-table-column prop="is_distribution" :label="$t('分销状态')" min-width="180">
                    <template slot-scope="scope">
                        {{scope.row.is_distribution==1?'参与':'不参与'}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" :label="$t('操作')" min-width="180">
                    <template slot-scope="scope">
                        <el-button slot="trigger" class="m-r-10" type="text" size="small" @click="
                            $router.push({
                                path: '/distribution/distribution_goods_edit',
                                query: { id: scope.row.id },
                            })">{{$t('设置佣金')}}</el-button>

                        <ls-dialog :title="$t('取消分销')" v-if="scope.row.is_distribution==1" class="inline m-l-10"
                            :content="`${$t('确定不参与：${scope.row.name}？请谨慎操作')}`" @confirm="couponDel([scope.row.id],0)">
                            <el-button slot="trigger" type="text" size="small">{{$t('取消分销')}}</el-button>
                        </ls-dialog>

                        <ls-dialog :title="$t('参与分销')" class="inline m-l-10" v-if="scope.row.is_distribution==0"
                            :content="`${$t('确定参与：${scope.row.name}？请谨慎操作')}`" @confirm="couponDel([scope.row.id],1)">
                            <el-button slot="trigger" type="text" size="small">{{$t('参与分销')}}</el-button>
                        </ls-dialog>

                    </template>
                </el-table-column>
            </el-table>

            <div class="flex row-right m-t-24">
                <ls-pagination v-model="pager" @change="getDistributionData()"></ls-pagination>
            </div>
        </div>

    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { Component, Vue } from 'vue-property-decorator'
import LsPagination from '@/components/ls-pagination.vue'
import LsDialog from '@/components/ls-dialog.vue'
import { RequestPaging } from '@/utils/util'
import ExportData from '@/components/export-data/index.vue'
import {
  apiDistributionGoodsLists,
  apiDistributionGoodsJoin
} from '@/api/distribution/distribution'
import { apiGoodsOtherList } from '@/api/goods.ts'
@Component({
  components: {
    LsPagination,
    LsDialog,
    ExportData
  }
})
export default class DistributionGoods extends Vue {
    /** S Data **/
    apiDistributionGoodsLists = apiDistributionGoodsLists

    $refs!: { paneTable: any };

    goodsSearchData = {
      name: '',
      code: '',
      status: '',
      supplier_id: '',
      category_id: '',
      is_distribution: ''
    };

    categoryList = [];

    options = [
      { value: '', label: i18n.t('全部') },
      { value: '1', label: i18n.t('参与分销') },
      { value: '0', label: i18n.t('取消分销') }
    ];

    goodsStatus = [
      { value: '', label: i18n.t('全部') },
      { value: '1', label: i18n.t('上架') },
      { value: '0', label: i18n.t('下架') },
      { value: '-1', label: i18n.t('已售馨') }
    ];

    pager = new RequestPaging();

    selectIds: Array<string> = [];

    /** E Data **/

    /** S Method **/

    // 获取商品分类
    getCategoryList () {
      apiGoodsOtherList({})
        .then((res: any) => {
          console.log(res)
		    this.categoryList = res.category_list
        })
    }

    // 获取分销列表
    getDistributionData (page?: number): void {
      page && (this.pager.page = page)
      this.pager.request({
        callback: apiDistributionGoodsLists,
        params: {
          ...this.goodsSearchData
        }
      })
    }

    // 选择某条数据
    selectionChange (val: any[]) {
      this.selectIds = val.map((item) => item.id)
    }

    // 全选
    selectAll () {
      this.$refs.paneTable.toggleAllSelection()
    }

    //  参不参与分销
    couponDel (ids: Array<number>, flag: number): void {
      apiDistributionGoodsJoin({
        ids: Array.isArray(ids) ? ids : this.selectIds,
        is_distribution: flag
      }).then((res) => {
        this.resetgoodsSearchData()
      })
    }

    // 重置
    resetgoodsSearchData () {
      Object.keys(this.goodsSearchData).map((key) => {
        this.$set(this.goodsSearchData, key, '')
      })
      this.getDistributionData()
    }

    /** E Method **/

    created () {
      this.getDistributionData()
      this.getCategoryList()
    }
}
</script>

<style lang="scss" scoped>
.ls-goods {
    &__top {
        padding-bottom: 6px;
    }
    .goods-search {
        .ls-input-price {
            width: 180px;
        }
    }
    .ls-goods__content {
        padding-top: 0;
    }
}
</style>
